<template>
    <div class="Media">
         <div class="title_bt">
            <div class="bt on" @click="add"><i class="el-icon-caret-bottom"></i>新建代码位组</div>
            <div class="bt" :class="multipleSelection.length!=0?'':'hui' " @click="statelist('删除')">删除</div>
            <div class="search"> 
                <el-input v-model="tablepage.name" @change="search()" placeholder="请输入代码位组名称"></el-input>
                <div class="button" @click="search()"><i class="el-icon-search"></i></div>
             </div>
        </div>
        <el-table :data="tableData" style="width: 100%" class="tablebox"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column prop="id" label="编号" align="center" sortable width="80"></el-table-column>
            <el-table-column prop="name" label="名称" align="center"></el-table-column>
            <el-table-column prop="type" label="类型" align="center"  width="150"></el-table-column>
            <el-table-column prop="updated_at" align="center" sortable label="更新时间" width="200" ></el-table-column>
            <el-table-column prop="imgurl_domain" align="center"  label="图片前缀域名"   >
                <!-- <template slot-scope="{ row }">
                     <el-image :src="row.imgurl_domain">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                     </el-image>
                </template> -->
            </el-table-column>
            <el-table-column prop="clickurl_domain" align="center"  label="点击链接前缀"  >
                  <!-- <template slot-scope="{ row }">
                       <a :href="row.imgurl_domain" v-if='row.imgurl_domain' target="_black">row.imgurl_domain</a>
                </template> -->
            </el-table-column>
            <el-table-column class-name="status-col"  label="操作" width="200"  align="center"  fixed="right">
                <template slot-scope="{ row, $index }">
                    <kt-button icon="el-icon-edit" size='mini'  label="修改" perms="sys:adminlist:edit" type="primary" @click="handleUpdate(row,$index)"/>
                    <kt-button icon="el-icon-delete" size='mini' label="删除" perms="sys:adminlist:delete" type="danger" @click="handleDelete(row.id)"/>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="pageswarp"
            :background="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=tablepage.page
            :page-size=page_size
            layout="total, prev, pager, next, jumper"
            :total=total>
        </el-pagination>
        <!-- 新建修改代码位组 -->
         <el-drawer
            :title="drawer_title"
            :visible.sync="drawer"
            :before-close="handleClose"
            custom-class="demo-drawer"
            ref="drawer"
             size="90%">
              <div class="demo-drawer__content">
                    <div class="demo-drawer__content_from">
                        <div class="from">
                            <el-form :model="userForm" :rules="rules" ref="userForm"  label-width="100px" >
                                <el-form-item label="名称：" prop="name">
                                    <el-input v-model="userForm.name"></el-input>
                                </el-form-item>
                                <el-form-item label="图片前缀域名">
                                    <el-input v-model="userForm.imgurl_domain"></el-input>
                                </el-form-item>
                                <el-form-item label="点击链接前缀">
                                    <el-input v-model="userForm.clickurl_domain"></el-input>
                                </el-form-item>
                                <el-form-item label="类型">
                                    <el-radio-group v-model="userForm.type">
                                        <el-radio label="站点"></el-radio>
                                        <el-radio label="频道"></el-radio>
                                        <el-radio label="页面"></el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="站点域名">
                                    <el-input v-model="userForm.site_domain"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="demo-drawer__footer">
                            <el-button type="primary"  @click="submitForm('userForm')" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                            <el-button @click="handleClose">取 消</el-button>
                        </div>
                    </div>
                </div>
         </el-drawer>
    </div>
</template>
<script>
import KtButton from "@/components/elbutton"
import { axios_adsensegroup_get ,axios_adsensegroup_update,axios_adver_open} from "@/api/infor";
export default {
    name:'Media',
    data(){
        return{
            loading:false,
            page_size:1,
            total:1,
            search_show:true,  //显示搜索盒子
            drawer:false,
            drawer_title:'新建自定义模版',
            tablepage:{
              page:1,
              name:''
            },
            userForm:{
                adver_type:this.drawer_title=="新建代码位组" ? 1 :2,
                id: '',
                name: '3DM游戏库',
                 imgurl_domain: '',
                clickurl_domain: '',
                type: '站点',
                site_domain:'',
            },
            rules:{
                name: [
                    { required: true, message: '请输入模板名称', trigger: 'blur' }
                ],
            },
            tableData: [  ],  //表格的数据
            multipleSelection: []
        }
    },
    created(){
          this.getdatalist("refresh")
    },
     components:{
        KtButton,
    },
    methods:{
         search(){
            this.getdatalist("refresh")
        },
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
             this.tablepage.page=val;
             this.getdatalist()
        },
         // 删除用户
        handleDelete(id){
            this.$confirm('确定要删除此条代码位组吗？','确认删除',{customClass:'layeralterelbox'}) .then(()  => {
                    this.filterdata({ids:[id],status:0,type:4},'删除')
                }).catch(()  => {});
        },
        handleClose(){
             this.drawer=false;
        },
        //操作列表选项
        filterdata(page,val){
            axios_adver_open(page).then((res) => {
                if(res.data.code==1){
                    this.$message({message:val+'已经操作成功', type: 'success'});
                    this.getdatalist()
                    this.multipleSelection = [];   // 清空选中项
                }
            }).catch((e )=>{
                this.$message({message:e, type: 'warning'});
            })
        },
        // 提交个人信息
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.adsense_update()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        add(){
            this.drawer_title='新建代码位组'; 
            this.userForm={
                name:'',
                des:'',
            }
            this.drawer=true; 
            this.$nextTick(()=>{
                this.$refs['userForm'].clearValidate();
            })
           
        },
          // 修改用户
          handleUpdate(item){
             this.drawer_title='修改代码位组'; 
             this.drawer=true; 
             this.$nextTick(()=>{
                this.$refs['userForm'].clearValidate();
            })
             this.userForm.id=item.id;
             this.userForm.name=item.name;
             this.userForm.type=item.type;
             this.userForm.imgurl_domain=item.imgurl_domain;
             this.userForm.clickurl_domain=item.clickurl_domain;
        },
        removeDuplicates(arr1, arr2) {
          const uniqueElements = new Set([...arr1, ...arr2]);
        return Array.from(uniqueElements);
        },
        statelist(val){
            let  state=''
             switch (val) {
                case "删除":
                    state =0;
                    break;
                case "启用":
                    state = 1;
                    break;
                case "停用":
                    state = 4;
                    break;
            }
            if(this.multipleSelection.length<1){
                this.$message('请勾选的代码位');
            }else{
                this.$confirm('确定要'+val+'勾选的的代码位组吗？','确认'+val+'',{customClass:'layeralterelbox'}) .then(()  => {
                      let arrid=[];
                    this.multipleSelection.forEach(row => {
                          let id=row.id
                        arrid.push(id)
                    });
                    this.filterdata({ids:arrid,status:state,type:4},val)
                }).catch(()  => {});
            } 
        },
        // 获取列表数据
        getdatalist(type){
            if(type=="refresh"){
                this.tablepage.page=1;
            }
            this.loading=true;
            axios_adsensegroup_get(this.tablepage).then((res) => {
                if(res.data.code==1){
                    this.loading=false;
                    this.tableData=res.data.data;
                    this.page_size=res.data.page_size;
                    this.total=Number(res.data.total);
                }
            }).catch(( )=>{})
        },
        adsense_update(){
            this.loading = true;
            axios_adsensegroup_update(this.userForm).then((res) => {
                if(res.data.code==1){
                    this.loading=false;
                    this.drawer=false;
                    this.getdatalist() //刷新列表
                }
            }).catch(( )=>{})
        }

    }
}
</script>
<style>
.demo-drawer .demo-drawer__content .demo-drawer__content_from .from .textarea{
    min-width: 500px;
    min-height: 300px;
    max-width: 600px;
    max-height: 600px;
    overflow-y: auto;
    outline: none;
}
</style>